import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { SettleSingerWrapper } from './styled'
import AreaHeaderV2 from '@/components/area-header-v2'
import { useAppSelector } from '@/store'
import { getImgSize } from '@/utils/getImgSize'

interface Iprops {
  children?: ReactNode
}

const SettleSinger: FC<Iprops> = () => {
  const settleSingers = useAppSelector((state) => state.recommend.settleSingers)
  return (
    <SettleSingerWrapper>
      <AreaHeaderV2
        title="入驻歌手"
        moreLink="/discover/artist"
        moreText="查看全部 &gt;"
      />
      <div className="singer-content">
        {settleSingers.map((item) => {
          return (
            <div key={item.id} className="list">
              <div className="left">
                <img className="img" src={getImgSize(item.picUrl, 62)} alt="" />
              </div>
              <div className="right">
                <div className="name">{item.name}</div>
                <div className="desc">{item.alias?.join(' ')}</div>
              </div>
            </div>
          )
        })}
        <div className="footer">
          <a className="btn">
            <span className="text">申请成为网易音乐人</span>
          </a>
        </div>
      </div>
    </SettleSingerWrapper>
  )
}
export default memo(SettleSinger)
